<template>
  <div class="mine-fa-list">
    <div class="tab-list">
      <div
        class="tab-item"
        :class="{ active: acTab == index }"
        v-for="(item, index) in tabList"
        :key="index"
        @click="checkTab(item, index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="mission-list-wrap">
      <div class="none-box" v-if="list.length == 0">{{ $t('暂无数据') }}</div>
      <missionItem
        v-for="(item, index) in list"
        :key="index"
        :missionObj="item"
      ></missionItem>
    </div>
    <div class="pagination-box">
      <el-pagination
        background
        :current-page="page.pageNo"
        :page-sizes="[12, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import missionItem from '@/views/mission/component/missionItem.vue'
import api from '@/api/personcenter.js'
export default {
  components: {
    missionItem,
  },
  data() {
    return {
      tabList: [
        {
          name: this.$t('已接单'),
          id: 3,
        },
        {
          name: this.$t('悬赏中'),
          id: 2,
        },
        {
          name: this.$t('已结单'),
          id: 4,
        },
      ],
      acTab: 0,
      page: {
        pageNo: 1,
        pageSize: 12,
        total: 0,
      },
      list: [],
    }
  },
  mounted() {
    this.handleCurrentChange(1)
  },
  methods: {
    checkTab(item, index) {
      this.acTab = index
      this.handleCurrentChange(1)
    },
    async getFaList() {
      let res = await this.$http.get(api.getMyMission, {
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          type: 2,
          status: this.tabList[this.acTab].id,
        },
      })
      if (res && res.code == 0) {
        this.list = res.data.list
        this.page.total = res.data.total
      } else {
        this.$message.error(res.msg || this.$t('网络错误'))
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.pageNo = 1
      this.getFaList()
    },
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.getFaList()
    },
  },
}
</script>
<style lang="scss" scoped>
.mine-fa-list {
  padding: 1.33rem;
  .tab-list {
    display: flex;
    margin-bottom: 1.33rem;
    .tab-item {
      font-size: 0.89rem;
      margin-right: 1rem;
      padding: 0 1rem;
      cursor: pointer;
      border: 1px solid rgba(66, 95, 155, 0.15);
      &.active {
        background: #339eff;
        border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
        color: #fff;
      }
    }
  }
  .mission-list-wrap {
    display: flex;
    flex-wrap: wrap;
  }
  .pagination-box {
    text-align: center;
  }
}
</style>
<style lang="scss">
.mine-fa-list {
  .el-pagination.is-background .el-pager li {
    border-radius: 0.2rem;
    border: 0.06rem solid #d9dbe2;
    background: #ffffff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    border: 0.06rem solid #146eb4;
    color: #146eb4;
    background: #ffffff;
  }
}
</style>
